<template>
  <div>
    <vm-form-render
      :form-json="formJson"
      :form-data="formData"
      :option-data="optionData"
      ref="vmFormRef"
    >
    </vm-form-render>
    <el-button type="primary" @click="submitForm">Submit</el-button>
    <!-- <van-button type="primary" @click="submitForm" block>提交</van-button> -->
  </div>
</template>
<script>
export default {
  name: "VantForm",
  data() {
    return {
      formJson: {
        formConfig: {
          background: "#EFEFEF",
          colon: false,
          cssCode: "",
          customClass: "",
          dataSources: [],
          functions: "",
          inputAlign: "left",
          inputBorder: false,
          jsonVersion: -2,
          labelAlign: "left",
          labelPosition: "left",
          labelWidth: 80,
          layoutType: "H5",
          modelName: "formData",
          onFormCreated: "",
          onFormDataChange: "",
          onFormMounted: "",
          padding: 5,
          radius: 4,
          refName: "vForm",
          rulesName: "rules",
          size: "",
        },
        widgetList: [
          {
            formItemFlag: true,
            icon: "text-field",
            options: {
              appendButton: false,
              appendButtonDisabled: false,
              appendButtonIcon: "search",
              appendButtonLabel: "",
              appendButtonType: "primary",
              clearable: true,
              customClass: [],
              defaultValue: "",
              disabled: false,
              hidden: false,
              inputAlign: "left",
              label: "姓名",
              labelAlign: "left",
              labelHidden: false,
              labelWidth: null,
              leftIcon: "",
              maxLength: null,
              name: "name",
              onAppendButtonClick: "",
              onBlur: "",
              onCreated: "",
              onFocus: "",
              onInput: "",
              onMounted: "",
              onValidate: "",
              placeholder: "",
              readonly: false,
              required: false,
              requiredHint: "",
              rightIcon: "",
              showWordLimit: false,
              size: "",
              type: "text",
              validation: "",
              validationHint: "",
            },
            type: "m-input",
            id: "minput75890",
          },
          {
            formItemFlag: true,
            icon: "number-field",
            options: {
              customClass: "",
              defaultValue: null,
              disabled: false,
              hidden: false,
              label: "年龄",
              labelAlign: "",
              labelHidden: false,
              labelIconClass: null,
              labelIconPosition: "rear",
              labelTooltip: null,
              labelWidth: null,
              name: "number",
              onBlur: "",
              onCreated: "",
              onFocus: "",
              onInput: "",
              onMounted: "",
              onValidate: "",
              placeholder: "",
              readonly: false,
              required: false,
              requiredHint: "",
              size: "",
              validation: "",
              validationHint: "",
            },
            type: "m-number",
            id: "mnumber48964",
          },
          {
            formItemFlag: true,
            icon: "stepper-field",
            options: {
              customClass: "",
              defaultValue: null,
              disabled: false,
              hidden: false,
              label: "步进输入",
              labelAlign: "",
              labelHidden: false,
              labelIconClass: null,
              labelIconPosition: "rear",
              labelTooltip: null,
              labelWidth: null,
              max: 100000000000,
              min: -100000000000,
              name: "mstepper88863",
              onBlur: "",
              onChange: "",
              onCreated: "",
              onFocus: "",
              onMounted: "",
              onValidate: "",
              precision: 0,
              readonly: false,
              step: 1,
              stepButtonSize: 28,
              validation: "",
              validationHint: "",
            },
            type: "m-stepper",
            id: "mstepper88863",
          },
          {
            formItemFlag: true,
            icon: "radio-field",
            options: {
              customClass: "",
              dataSetName: "",
              defaultValue: 1,
              direction: "horizontal",
              disabled: false,
              dsEnabled: false,
              dsName: "",
              hidden: false,
              iconSize: 20,
              label: "单选项",
              labelAlign: "",
              labelHidden: false,
              labelIconClass: null,
              labelIconPosition: "rear",
              labelKey: "label",
              labelTooltip: null,
              labelWidth: null,
              name: "sex",
              onChange: "",
              onCreated: "",
              onMounted: "",
              onValidate: "",
              optionItems: [
                { label: "男", value: 1 },
                { label: "女", value: 2 },
                { label: "未知", value: 3 },
              ],
              readonly: false,
              required: false,
              requiredHint: "",
              valueKey: "value",
            },
            type: "m-radio",
            id: "mradio10019",
          },
          {
            formItemFlag: true,
            icon: "checkbox-field",
            options: {
              customClass: "",
              dataSetName: "",
              defaultValue: [1],
              direction: "horizontal",
              disabled: false,
              dsEnabled: false,
              dsName: "",
              hidden: false,
              iconSize: 20,
              label: "多选项",
              labelAlign: "",
              labelHidden: false,
              labelIconClass: null,
              labelIconPosition: "rear",
              labelKey: "label",
              labelTooltip: null,
              labelWidth: null,
              name: "mcheckbox91712",
              onChange: "",
              onCreated: "",
              onMounted: "",
              onValidate: "",
              optionItems: [
                { label: "唱歌", value: 1 },
                { label: "跳舞", value: 2 },
                { label: "画画", value: 3 },
              ],
              readonly: false,
              required: false,
              requiredHint: "",
              valueKey: "value",
            },
            type: "m-checkbox",
            id: "mcheckbox91712",
          },
          {
            formItemFlag: true,
            icon: "select-field",
            options: {
              customClass: "",
              dataSetName: "",
              defaultValue: 1,
              disabled: false,
              dsEnabled: false,
              dsName: "",
              filterable: false,
              hidden: false,
              label: "公司",
              labelAlign: "",
              labelHidden: false,
              labelIconClass: null,
              labelIconPosition: "rear",
              labelKey: "label",
              labelTooltip: null,
              labelWidth: null,
              multiple: false,
              name: "company",
              onChange: "",
              onCreated: "",
              onMounted: "",
              onRemoteQuery: "",
              onValidate: "",
              optionItems: [
                { label: "保利文", value: 1 },
                { label: "基利连", value: 2 },
                { label: "东宝", value: 3 },
              ],
              placeholder: "",
              readonly: false,
              remote: false,
              required: false,
              requiredHint: "",
              size: "",
              valueKey: "value",
            },
            type: "m-select",
            id: "mselect11750",
          },
          {
            formItemFlag: true,
            icon: "date-field",
            options: {
              clearable: true,
              customClass: "",
              defaultValue: null,
              disabled: false,
              editable: false,
              format: "yyyy-MM-dd",
              hidden: false,
              label: "日期选择",
              labelAlign: "",
              labelHidden: false,
              labelIconClass: null,
              labelIconPosition: "rear",
              labelTooltip: null,
              labelWidth: null,
              maxDate: "",
              minDate: "",
              name: "date",
              onConfirm: "",
              onCreated: "",
              onMounted: "",
              onValidate: "",
              placeholder: "",
              readonly: false,
              required: false,
              requiredHint: "",
              size: "",
              validation: "",
              validationHint: "",
            },
            type: "m-date",
            id: "mdate66667",
          },
          {
            formItemFlag: true,
            icon: "switch-field",
            options: {
              activeColor: null,
              activeLabel: "",
              activeValue: true,
              customClass: "",
              defaultValue: false,
              disabled: false,
              hidden: false,
              inactiveColor: null,
              inactiveLabel: "",
              inactiveValue: false,
              label: "开关",
              labelAlign: "",
              labelHidden: false,
              labelIconClass: null,
              labelIconPosition: "rear",
              labelTooltip: null,
              labelWidth: null,
              name: "switch",
              onChange: "",
              onCreated: "",
              onMounted: "",
              onValidate: "",
              readonly: false,
              switchSize: 24,
            },
            type: "m-switch",
            id: "mswitch35298",
          },
          {
            formItemFlag: true,
            icon: "rate-field",
            options: {
              allowHalf: false,
              customClass: "",
              defaultValue: 0,
              disabled: false,
              hidden: false,
              label: "评分",
              labelAlign: "",
              labelHidden: false,
              labelIconClass: null,
              labelIconPosition: "rear",
              labelTooltip: null,
              labelWidth: null,
              max: 5,
              name: "rate",
              onChange: "",
              onCreated: "",
              onMounted: "",
              onValidate: "",
              readonly: false,
              required: false,
              requiredHint: "",
              showScore: false,
              validation: "",
              validationHint: "",
            },
            type: "m-rate",
            id: "mrate11504",
          },
          {
            formItemFlag: true,
            icon: "slider-field",
            options: {
              customClass: "",
              defaultValue: null,
              disabled: false,
              height: null,
              hidden: false,
              label: "滑块",
              labelAlign: "",
              labelHidden: false,
              labelIconClass: null,
              labelIconPosition: "rear",
              labelTooltip: null,
              labelWidth: null,
              max: 100,
              min: 0,
              name: "slider",
              onChange: "",
              onCreated: "",
              onMounted: "",
              onValidate: "",
              range: false,
              readonly: false,
              size: "",
              step: 10,
              validation: "",
              validationHint: "",
            },
            type: "m-slider",
            id: "mslider8707",
          },
          {
            formItemFlag: true,
            icon: "picture-upload-field",
            options: {
              capture: "",
              customClass: "",
              customRule: "",
              customRuleHint: "",
              disabled: false,
              fileMaxSize: 5,
              fileTypes: ["jpg", "jpeg", "png"],
              hidden: false,
              label: "图片上传",
              labelAlign: "",
              labelHidden: false,
              labelIconClass: null,
              labelIconPosition: "rear",
              labelTooltip: null,
              labelWidth: null,
              limit: 3,
              multipleSelect: false,
              name: "picture",
              onBeforeUpload: "",
              onCreated: "",
              onFileRemove: "",
              onMounted: "",
              onUploadError: "",
              onUploadSuccess: "",
              onValidate: "",
              required: false,
              requiredHint: "",
              uploadTip: "",
              uploadURL: "",
              withCredentials: false,
            },
            type: "m-picture-upload",
            id: "mpictureupload106068",
          },
        ],
      },
      formData: {},
      optionData: {},
    }
  },
  methods: {
    submitForm() {
      this.$refs.vmFormRef
        .getFormData()
        .then((formData) => {
          // Form Validation OK
          alert(JSON.stringify(formData))
        })
        .catch((error) => {
          // Form Validation failed
          this.$message.error(error)
        })
    },
  },
}
</script>
